<script lang="ts" setup>
type Props = {
  faceImg: string
  message?: string
  position: 'left' | 'right' | 'center'
}
const props = withDefaults(defineProps<Props>(), {})
</script>

<template>
  <div class="message_box">
    <div v-if="position == 'left'" class="message_left">
      <n-avatar :size="40" :src="props.faceImg" />

      <div class="message">
        <span>{{ props.message }} </span>
      </div>
    </div>
    <div v-if="position == 'right'" class="message_right">
      <div class="message">
        <span>{{ props.message }} </span>
      </div>
      <n-avatar :size="40" :src="props.faceImg" />
    </div>

    <div v-if="position == 'center'" class="message_center">
      <span>{{ props.message }} </span>
    </div>
  </div>
</template>

<style scoped lang="less">
.message_box {
  margin-top: 20px;
  .message_left {
    display: flex;
    .n-avatar {
      margin: 0 20px;
    }

    .message {
      color: #000;
      width: 70%;
      position: relative;
      span {
        background-color: #fff;
        padding: 10px;
        display: inline-block;
        line-height: 20px;
        border-radius: 5px;
        &::before {
          content: '';
          display: block;
          width: 0;
          height: 0;
          position: absolute;
          border: 10px solid;
          left: -15px;
          top: 10px;
          border-color: transparent #fff transparent transparent;
        }
      }
    }
  }
  .message_right {
    display: flex;
    display: flex;
    justify-content: flex-end;
    .n-avatar {
      margin: 0 20px;
    }

    .message {
      color: #000;
      width: 70%;
      margin-left: 20px;
      text-align: right;
      span {
        position: relative;
        background-color: #95ec69;
        padding: 10px;
        display: inline-block;
        line-height: 20px;
        border-radius: 5px;
        &::before {
          content: '';
          display: block;
          width: 0;
          height: 0;
          position: absolute;
          border: 10px solid;
          right: -15px;
          top: 10px;
          border-color: transparent transparent transparent #95ec69;
        }
      }
    }
  }

  .message_center {
    text-align: center;
    font-size: 12px;
    color: #695681;
  }
}
</style>
